<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mac动画效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #div1 {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function() {
            var div = document.querySelector("#div1");
            var imgs = document.querySelectorAll("img");
            var width = imgs[0].offsetWidth;
            document.onmousemove = function(e) {
                Array.from(imgs).forEach(img => {
                    var a = img.offsetLeft + img.offsetWidth / 2 - e.clientX;
                    var b = img.offsetTop + div.offsetTop + img.offsetHeight / 2 - e.clientY;
                    dis = Math.sqrt(a * a + b * b)
                        // 以400为基准
                    if (dis <= 400) {
                        var rate = 2 - dis / 400
                        img.width = rate * width
                    } else {
                        img.width = "64"
                    }
                })
            }

        }
    </script>
</head>

<body>
    <div id="div1">
        <img src="images/01.png" alt="" width="64">
        <img src="images/02.png" alt="" width="64">
        <img src="images/03.png" alt="" width="64">
        <img src="images/02.png" alt="" width="64">
        <img src="images/01.png" alt="" width="64">
    </div>
</body>

</html>